<!-- 多选练习 -->
<template>
  <div class="multipleChoicePractice-page">
    <div class="theory-box">
      <div class="theory-box-l">
        <div class="answerSheet-box">
          <div class="answerSheet-box-name">答题卡</div>
          <div class="answerSheet-on">
            <div class="answerSheet-box-cont">
              <div class="theory-box-l-title">多选</div>
              <div class="answerSheet-box-cont-o">
                <div class="answerSheet-box-cont-o-item" :class="item.answer_state == 1 ? 'sure' : item.answer_state == 2 ? 'worn' : ''" v-for="(item, index) in list" @click="handelClick(item, index)">
                  <div style="margin-top: 2px">{{ index + 1 }}</div>
                  <div>{{ item.question.question_type == 1 ? '单' : item.question.question_type == 2 ? '多' : '判' }}</div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="theory-box-r">
        <Practices :dataList="list" :paperId="paperId" :recordId="recordId" :Qsindex="Qsindex" @changeTwo="changeTwo" @send="sendClick" @onchange="onchange" @getData="getData"></Practices>
      </div>
    </div>
  </div>
</template>

<script>
import Practices from '@/components/ExamPractice/practices'
import {getHomeOldRecord, getHomeStartPractice, getSubmitTheTestPaper} from "@/api";
export default {
  name: "multipleChoicePractice",
  components: {
    Practices
  },
  data() {
    return {
      Qsindex: 0,
      Qnum: 0,
      list: [],
      paperId: 0,
      recordId: null,
    }
  },
  mounted() {
    this.getHomeStartPractice()
  },
  methods: {
    getHomeOldRecord(e) {
      getHomeOldRecord({special_type: 2}).then(res => {
        if (res.code == 1) {
          if (res.data) {
            this.submitClick(res.data.record_id)
          } else {
            this.getHomeStartPractice()
          }
        }
      })
    },
    // 确认交卷
    submitClick(recordId) {
      let params = {record_id: recordId}
      getSubmitTheTestPaper(params).then(res => {
        if (res.code == 1) {
          this.getHomeStartPractice()
        }
      })
    },
    // 获取单选列表
    getHomeStartPractice() {
      let params = {
        special_type: 2
      }
      getHomeStartPractice(params).then(res => {
        if (res.code == 1) {
          this.Qnum++
          this.recordId = res.data.detail.record_id
          this.list = res.data.detail.question.map((item)=> {
            if (item.answer_state == 2) {
              item.question.analysisShow = true
            } else {
              item.question.analysisShow = false
            }
            return {
              ...item,
            }
          })

          let arr = this.list[this.Qsindex]
          if (arr.answer_state == 1 && this.Qnum !== 1) {
            setTimeout(() => {
              if (this.Qsindex < this.list.length - 1) {
                this.Qsindex = this.Qsindex + 1;
              }
            }, 400);
          } else {
            if (arr.answer_state == 2) {
              this.list[this.Qsindex].question.analysisShow = true
            } else {
              this.list[this.Qsindex].question.analysisShow = false
            }
          }
          if (this.Qnum == 1) {
            const index = this.list.findIndex(item => item.answer_state == 0 && !item.answer);
            this.Qsindex = index
          }
        }
      })
    },
    // 点击切换题目
    handelClick(item, index) {
      this.Qsindex = index
    },

    onchange(e) {
      if (e == 1) {
        if(this.Qsindex != 0) {
          this.Qsindex--
        } else {
          this.Qsindex = 0
        }
      } else {
        if (this.Qsindex + 1 == this.list.length) {
          this.Qsindex == this.list.length
        } else {
          this.Qsindex++
        }
      }
    },
    getData() {
      this.getHomeStartPractice()
    },

    // 父子调用
    changeTwo(index) {
      this.list[index].answer_state = 0
    },
    // 父子调用
    sendClick() {
      this.getHomeStartPractice()
    }
  }
}
</script>

<style lang="scss" scoped>
.multipleChoicePractice-page {
  width: 100%;
  height: 100%;
}

</style>
